<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>MVVM简单入门</title>
    <script src="../../框架/vue.js"></script>
</head>
<body><!-- 案例表示当按下按钮的时候变量加一 -->
<div id="app"><!--如果显示无法识别变量修改id名-->
    <p>{{ counter }}</p><!--框架语法，表示将变量代入，插值，用于绑定数据-->
    <p>{{text.split(',').reverse().join('.')}}</p> <!--插值中除了可以绑定固有的变量之外，也可以防止JS的表达式-->
    <button v-on:click="increment">点击自增</button><!--一个绑定了方法的按钮，v-on表示监听事件，click表示点击动作，后面的是点击后调用的方法-->
    <!--表示当鼠标点击按钮的时候，会调用方法将变量的数值+1-->
</div>

<div id="ppp">
    <div>Price:{{ price }}</div><!--原始数据-->
    <div>Tomal:{{price * quantity}}</div><!--未被框架监听的数据更新-->
    <div>Taxes:{{totalPriceWithTax}}</div><!--被框架监听的数据更新-->
    <button @click="changePrice">改变价格</button><!--@click与v-on：click等价-->
</div>

<div id="sdd">
    <div></div>
</div>

<div id="had">
    {{say()}}<!--使用插值调用方法-->
</div>

<div id="sdf">
    <input type="text" placeholder="请输入……" v-model="age">
    <!--v-model是一个双向数据绑定的组件，当input标签中的值发生改变的时候，对应的变量的值也会发生改变，同样的，当变量发生改变的时候，input中渲染的值也会相应的发生改变-->
    {{age}}
    {{sum}}
    <div>
        {{count(6)}}<!--传递一个参数后进行函数计算后再返回-->
    </div>
</div>

<div id="hjs">
    <input type="text" placeholder="请输入……" v-model="age">
    <!--v-model是一个双向数据绑定的组件，当input标签中的值发生改变的时候，对应的变量的值也会发生改变，同样的，当变量发生改变的时候，input中渲染的值也会相应的发生改变-->
    {{age}}
    {{sum}}
</div>

<div id="jdd">
    fristname:<input type="text" v-model="firsttName"><br>
    lastname:<input type="text" v-model="lastName"><br>
    <p>fullName:<input type="text" v-model="fullName">{{lastName}}</p>
</div>

<script>//开始Vue部分
    let vue = new Vue({//创建Vue实例
        el:'#app',//指定Vue实例的作用对象
        data:{//Vue实例的数据存放代码块
            counter:0,
            text:'你好,世界'
        },
        methods:{//Vue的方法存放代码块
            increment:function(){//Vue定义方法的语句
                this.counter++;//方法内的具体实现代码过程
            }
        }
    });

    let vue2 = new Vue({
        el:'#ppp',
        data(){
            //在data中使用return的好处：
            //在大型项目中 data 需要使用 return来返回数据
            // 不用return这种方式返回的数据在vue实例中是全局可见的
            // 容易造成数据污染。使用return 返回的数据仅在组件内可见
            // 对其他组件不生效
            return{
                price:5.0,
                quantity:2
            };
        },
        computed:{//用来监听数据变化，及时渲染更新视图
            totalPriceWithTax(){//数据变化方法
                return this.price * this.quantity * 1.03;
            }
        },
        methods:{
            changePrice(){//更新数据方法和具体代码实现
                this.price = 10;
            }
        }
    });

    let vue3 = new Vue({
        el:'#sdd',
        data(){
            return{
                //data属性用来统一的放置页面所用到的数据，方便的统一管理防止数据在页面中分散凌乱的出现
            }
        },
        methods:{

        },
        // template:"<p>模板所渲染的内容</p>"//模板可以将所选的内容渲染到el所挂在的DOM上，此处将div标签变成了p标签进行渲染
        //当需要渲染的内容包含多条语句时，需要将多条语句放置在一个根节点下，比如：
        template:"<div><p>这是一条内容</p><p>这是两条内容</p></div>"
    });

    let vue4 = new Vue({
        el:'#had',
        data(){
            return{
                name:'张三'
            }
        },
        methods:{//这个属性定义方法，可以被调用
            say:function (){
                return "你好，" +this.name//方法内可以用this关键字调用data属性内的数据
            }
        }
    });

    let vue5 =new Vue({
        el:'#sdf',
        data(){
            return{
                age:10
            }
        },
        computed:{//计算属性，计算属性内的值可以和data属性一样在页面中被渲染，但是一般时通过函数计算后的返回值
            //data计算属性中的值会根据data中的值的变化而变化
            sum(){
                return parseInt(this.age) + 10//将接收到的字符串值转换成int类型进行计算后返回
            },
            //计算属性的本质是一个方法，除了在调用的时候不加’（）‘之外，也是可以给计算属性进行传递参数的
            count(){
                return function (index){
                    return index + 1
                }
            }
        }
    });

    let vue6 = new Vue({
       el:'#hjs',
        data(){
            return{
                age:10
            }
        },
        computed:{//计算属性，计算属性内的值可以和data属性一样在页面中被渲染，但是一般时通过函数计算后的返回值
            //data计算属性中的值会根据data中的值的变化而变化
            sum(){
                return parseInt(this.age) + 10//将接收到的字符串值转换成int类型进行计算后返回
            }
        },
        watch:{//监视属性，当变量发生变的时候，执行代码块中的内容
           age(){
               alert('age变化了')
           }
        },
    });

    let b = new Vue({
       el:'#jdd',
       data:{
           firsttName: 'Jeck',
           lastName:'Jones'
       },
        computed:{
           fullName:{
               get:function (){
                   return this.firsttName +''+ this.lastName
               },
               set:function (newVale){
                   var names = newVale.split('')
                   this.firsttName = names[0]
                   this.lastName = names[names.length-1]
               }
           }
        }
    });
</script>
</body>
</html>